/* 
  Animation 微动画  
  基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
 */

/* css 滤镜 控制黑白底色gif的 */

.gif-black {
	mix-blend-mode: screen;
}

.gif-white {
	mix-blend-mode: multiply;
}

/* Animation css */

[class*='animation-'] {
	animation-duration: 0.2s;
	animation-timing-function: ease-out;
	animation-fill-mode: both;
}

.animation-fade {
	animation-name: fade;
	animation-duration: 0.3s;
	animation-timing-function: linear;
}

.animation-scale-up {
	animation-name: scale-up;
}

.animation-scale-down {
	animation-name: scale-down;
}

.animation-slide-top {
	animation-name: slide-top;
}

.animation-slide-bottom {
	animation-name: slide-bottom;
}

.animation-slide-left {
	animation-name: slide-left;
}

.animation-slide-right {
	animation-name: slide-right;
}

.animation-shake {
	animation-name: shake;
}

.animation-reverse {
	animation-direction: reverse;
}

.animation-topusti {
	animation-name: topusti;
}

.animation-scale1 {
	animation: scale1 ease 1.3s 1;
}

.animation-Top {
	animation: Top ease 1.3s 1;
}

.weli-xet-chogle {
	background-image: -webkit-linear-gradient(left, red, rgb(20, 11, 255));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: weuiLoading 2s linear infinite;
}

.weli-hdnew {
	animation: hdnew 1.2s ease-in-out infinite;
}

.weli-heart {
	animation: beat 0.6s infinite ease-in;
}

@keyframes fade {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes topusti {
	0% {
		opacity: 0;
	}

	30% {
		opacity: 0.3;
	}

	60% {
		opacity: 0.6;
	}

	100% {
		opacity: 1;
	}
}

@keyframes scale-up {
	0% {
		opacity: 0;
		transform: scale(0.2);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes scale-down {
	0% {
		opacity: 0;
		transform: scale(1.8);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes slide-top {
	0% {
		opacity: 0;
		transform: translateY(-100%);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slide-bottom {
	0% {
		opacity: 0;
		transform: translateY(100%);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes shake {

	0%,
	100% {
		transform: translateX(0);
	}

	10% {
		transform: translateX(-9px);
	}

	20% {
		transform: translateX(8px);
	}

	30% {
		transform: translateX(-7px);
	}

	40% {
		transform: translateX(6px);
	}

	50% {
		transform: translateX(-5px);
	}

	60% {
		transform: translateX(4px);
	}

	70% {
		transform: translateX(-3px);
	}

	80% {
		transform: translateX(2px);
	}

	90% {
		transform: translateX(-1px);
	}
}

@keyframes slide-left {
	0% {
		opacity: 0;
		transform: translateX(-100%);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slide-right {
	0% {
		opacity: 0;
		transform: translateX(100%);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes hdnew {
	0% {
		top: 4px;
	}

	50% {
		top: 0px;
	}

	100% {
		top: 4px;
	}
}

@keyframes chong {
	0% {
		opacity: 0;
		transform: scale(0.8);
	}

	50% {
		opacity: 1;
		transform: scale(1.5);
	}

	100% {
		opacity: 1;
		transform: scale(0);
	}
}

@keyframes scale1 {

	0%,
	10%,
	100%,
	50%,
	70% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	30% {
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
	}

	40% {
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
	}

	60% {
		-webkit-transform: scale(1.15);
		transform: scale(1.15);
	}
}

@keyframes dotCenter {
	0% {
		opacity: 0.5;
	}

	25% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}

	75% {
		opacity: 0.3;
	}

	100% {
		opacity: 0.5;
	}
}

@keyframes weuiLoading {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(1turn);
	}
}

@keyframes srotate {
	0% {
		transform: rotate(180deg);
	}

	100% {
		transform: rotate(0deg);
	}
}

@keyframes erotate {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(180deg);
	}
}

@keyframes beat {
	0% {
		transform: scale(1) rotate(0deg);
	}

	40% {
		transform: scale(1) rotate(0deg);
	}

	55% {
		transform: scale(1.3) rotate(-30deg);
	}

	70% {
		transform: scale(1) rotate(0deg);
	}

	85% {
		transform: scale(1.3) rotate(-60deg);
	}

	100% {
		transform: scale(1) rotate(0deg);
	}
}

@keyframes Top {
	0% {
		top: 0;
	}

	100% {
		top: 140rpx;
	}
}

@keyframes up-and-down {
	10% {
		height: 30%;
	}

	30% {
		height: 100%;
	}

	60% {
		height: 50%;
	}

	80% {
		height: 75%;
	}

	100% {
		height: 20%;
	}
}

swiper.square-dot .wx-swiper-dot {
	background-color: #fff;
	opacity: 0.4;
	width: 10rpx;
	height: 10rpx;
	border-radius: 20rpx;
}

swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active {
	opacity: 1;
	width: 30rpx;
	animation: beat ease 1.3s 1;
}

swiper.round-dot .wx-swiper-dot {
	width: 10rpx;
	height: 10rpx;
	top: -4rpx;
	transition: all 0.3s;
	position: relative;
}

swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active::after {
	content: '';
	position: absolute;
	width: 10rpx;
	height: 10rpx;
	top: 0rpx;
	left: 0rpx;
	right: 0;
	bottom: 0;
	margin: auto;
	background-color: #fff;
	border-radius: 20rpx;
}

swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active {
	width: 18rpx;
	height: 18rpx;
	top: 0rpx;
}

@keyframes rotation {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes rotate {
	0% {
		transform: rotate(-90deg);
	}

	100% {
		transform: rotate(90deg);
	}
}

@keyframes ripple {
	to {
		transform: scaleX(1.3) scaleY(1.6);
		opacity: 0;
	}
}

@keyframes jump {
	0% {
		-webkit-transform: translate(0);
		transform: translate(0);
	}

	10% {
		-webkit-transform: translateY(5px) scaleX(1.2) scaleY(0.8);
		transform: translateY(5px) scaleX(1.2) scaleY(0.8);
	}

	30% {
		-webkit-transform: translateY(-13px) scaleX(1) scaleY(1) rotateZ(5deg);
		transform: translateY(-13px) scaleX(1) scaleY(1) rotateZ(5deg);
	}

	50% {
		-webkit-transform: translateY(0) scale(1) rotateZ(0);
		transform: translateY(0) scale(1) rotateZ(0);
	}

	55% {
		-webkit-transform: translateY(0) scaleX(1.1) scaleY(0.9) rotateZ(0);
		transform: translateY(0) scaleX(1.1) scaleY(0.9) rotateZ(0);
	}

	70% {
		-webkit-transform: translateY(-4px) scaleX(1) scaleY(1) rotateZ(-2deg);
		transform: translateY(-4px) scaleX(1) scaleY(1) rotateZ(-2deg);
	}

	80% {
		-webkit-transform: translateY(0) scaleX(1) scaleY(1) rotateZ(0);
		transform: translateY(0) scaleX(1) scaleY(1) rotateZ(0);
	}

	85% {
		-webkit-transform: translateY(0) scaleX(1.05) scaleY(0.95) rotateZ(0);
		transform: translateY(0) scaleX(1.05) scaleY(0.95) rotateZ(0);
	}

	100% {
		-webkit-transform: translateY(0) scaleX(1) scaleY(1);
		transform: translateY(0) scaleX(1) scaleY(1);
	}
}

@keyframes arrowanim {

	0%,
	100%,
	54% {
		transform: translateY(0)
	}

	18%,
	36% {
		transform: translateY(30rpx)
	}

	27% {
		transform: translateY(20rpx)
	}
}

@keyframes arrowanimminus {

	0%,
	100%,
	54% {
		transform: translateY(0)
	}

	18%,
	36% {
		transform: translateY(-30rpx)
	}

	27% {
		transform: translateY(-20rpx)
	}
}
